<template>
  <div>
    <el-row type="flex" align="middle" justify="center">
      <el-menu
          mode="horizontal"
          @select="handleSelect"
          style="font-size: large"
          router="true"
      >
        <el-menu-item index="/Home">全部</el-menu-item>
        <el-menu-item index="/Kejiqingbao">科技情报</el-menu-item>
        <el-submenu index="3">
          <template slot="title">证书</template>
          <el-menu-item index="3-1">证书</el-menu-item>
          <el-menu-item index="/Pingshenzhengshu">评审证书</el-menu-item>
          <el-menu-item index="/Jianglizhengshu">奖励证书</el-menu-item>
        </el-submenu>
        <el-menu-item index="/Biaozhun">标准</el-menu-item>
        <el-submenu index="5">
          <template slot="title">专利</template>
          <el-menu-item index="5-1">专利</el-menu-item>
          <el-menu-item index="/Luneizhuanli">路内专利</el-menu-item>
          <el-menu-item index="/Zhuanli">路外专利</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">期刊</template>
          <el-menu-item index="6-1">期刊</el-menu-item>
          <el-menu-item index="/Luneiqikan">路内期刊</el-menu-item>
          <el-menu-item index="/Luwaiqikan">路外期刊</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">党政</template>
          <el-menu-item index="/Dangzhengxuanchuan">党政</el-menu-item>
          <el-menu-item index="/Zhenggong">京铁政工</el-menu-item>
          <el-menu-item index="/Diaoyan">京铁调研</el-menu-item>
          <el-menu-item index="/Baogao">党代会报告</el-menu-item>
          <el-menu-item index="/Gongzuolunwen">政治工作论文</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-row>

    <el-row
        style="margin-top: 15px"
        type="flex"
        align="middle"
        justify="center"
    >
      <div>
        <el-form :inline="true" :model="searchData">
          <el-form-item style="float: left" label="搜索字段">
            <el-select
                v-model="searchData.type"
                clearable
                placeholder="全部字段"
            >
              <el-option label="全部字段" value="全部字段"></el-option>
              <el-option label="标题" value="标题"></el-option>
              <el-option label="作者" value="作者"></el-option>
              <el-option label="年份" value="年份"></el-option>
              <el-option label="出处" value="出处"></el-option>
              <el-option label="摘要" value="摘要"></el-option>
              <el-option label="主题" value="主题"></el-option>
              <el-option label="单位" value="单位"></el-option>
              <el-option label="关键字" value="关键字"></el-option>
              <el-option label="期刊名" value="期刊名"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: left" label="搜索条件">
            <el-input
                v-model="searchData.condition"
                placeholder="搜索条件"
            ></el-input>
          </el-form-item>
          <el-form-item style="float: left">
            <el-button type="primary" icon="el-icon-search" @click="onSearch"
            >搜索
            </el-button>
          </el-form-item>
          <el-form-item style="float: left">
            <el-button type="primary" @click="onSearch">高级检索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-row>

    <el-row>
      <hr/>
    </el-row>

    <el-row gutter="20">
      <el-col :span="12">
        <h2 style="margin-left: 30px">新闻</h2>
        <hr/>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in carouselImgList" :key="item">
            <a :href="item.link">
              <img
                  :src="item.src"
                  style="height: 100%; width: 100%"
                  alt="图片丢失了"
                  :title="item.title"
              />
            </a>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="12">
        <h2 style="margin-left: 30px">通知</h2>
        <hr/>
        <el-table :data="tableData" :show-header="false" style="width: 100%">
          <el-table-column label="新闻列表">
            <template slot-scope="scope">
              <a
                  :href="scope.row.link"
                  target="_blank"
                  class="el-button--text"
              >{{ scope.row.title }}</a
              >
            </template>
          </el-table-column>
          <el-table-column label="日期" prop="date" width="180">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <h2 style="margin-left: 30px">内部资源</h2>
      <hr/>
      <el-col :span="6" v-for="item in innerSource" :key="item">
        <el-card
            :body-style="{ padding: '10px' }"
            style="height: 240px; width: 200px; margin-bottom: 30px"
        >
          <img :src="item.url" style="height: 180px; width: 180px"/>
          <div style="padding: 14px; font-size: x-large; text-align: center">
            <router-link :to="item.link" style="text-decoration: none"
            >{{ item.title }}
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <h2 style="margin-left: 30px">外部资源</h2>
      <hr/>
      <el-col :span="6" v-for="item in outerSource" :key="item">
        <el-card
            :body-style="{ padding: '10px' }"
            style="height: 240px; width: 200px; margin-bottom: 30px"
        >
          <img :src="item.url" style="height: 180px; width: 180px"/>
          <div style="padding: 14px; font-size: x-large; text-align: center">
            <router-link :to="item.link" style="text-decoration: none"
            >{{ item.title }}
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <h2 style="margin-left: 30px">核心期刊</h2>
      <hr/>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="内刊" name="first">
          <el-col :span="4" v-for="item in book1" :key="item">
            <el-card
                style="
                height: 60px;
                width: 200px;
                margin-bottom: 30px;
                text-align: center;
                vertical-align: center;
              "
                shadow="always"
            >
              <div style="font-size: large">
                {{ item.name }}
              </div>
            </el-card>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="外刊" name="second">
          <el-col :span="4" v-for="item in book2" :key="item">
            <el-card
                style="
                height: 60px;
                width: 200px;
                margin-bottom: 30px;
                text-align: center;
                vertical-align: center;
              "
                shadow="always"
            >
              <div
                  style="
                  font-size: large;
                  text-align: center;
                  vertical-align: center;
                "
              >
                {{ item.name }}
              </div>
            </el-card>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import {getIpAddress} from "@/api";

export default {
  name: "BootIndex",
  data() {
    return {
      searchData: {
        type: "",
        condition: "",
      },
      carouselImgList: [
        {
          name: "img1",
          src: "https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2021%2F0608%2F7ecdbee9j00qucddy005wc00234015ac.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
          link: "https://www.163.com/mobile/article/GBUCE8V50011819H.html",
          title: "img1",
        },
        {
          name: "img2",
          src: require("@/assets/img/carousel/2.jpg"),
          title: "img2",
        },
        {
          name: "img3",
          src: require("@/assets/img/carousel/3.jpg"),
          title: "img3",
        },
      ],
      tableData: [
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
        {
          title: "TEST",
          link: "https://www.baidu.com",
          date: "2021/05/01",
        },
      ],
      innerSource: [
        {
          title: "科技情报",
          url: require("@/assets/img/innerSource/kjqb.jpg"),
          link: "/Kejiqingbao",
        },
        {
          title: "评审证书",
          url: require("@/assets/img/innerSource/pszs.jpg"),
          link: "/Pingshenzhengshu",
        },
        {
          title: "奖励证书",
          url: require("@/assets/img/innerSource/jlzs.jpg"),
          link: "/Jianglizhengshu",
        },
        {
          title: "标准",
          url: require("@/assets/img/innerSource/bz.jpg"),
          link: "/Biaozhun",
        },
        {
          title: "路内专利",
          url: require("@/assets/img/innerSource/lnzl.jpg"),
          link: "/Luneizhuanli",
        },
        {
          title: "路内期刊",
          url: require("@/assets/img/innerSource/lnqk.jpg"),
          link: "/Luneiqikan",
        },
        {
          title: "党政宣传",
          url: require("@/assets/img/innerSource/dzxc.jpg"),
          link: "/Dangzhengxuanchuan",
        },
      ],
      outerSource: [
        {
          title: "路外期刊",
          url: require("@/assets/img/outerSource/lwqk.jpg"),
          link: "/Luwaiqikan",
        },
        {
          title: "论文",
          url: require("@/assets/img/outerSource/lw.jpg"),
          link: "/Lunwen",
        },
        {
          title: "专利",
          url: require("@/assets/img/outerSource/zl.jpg"),
          link: "/Zhuanli",
        },
      ],
      activeName: "first",
      book1: [
        {
          name: "北京铁道科技图",
          url: "#",
        },
        {
          name: "铁道通信信号图",
          url: "#",
        },
        {
          name: "中国铁路图",
          url: "#",
        },
      ],
      book2: [
        {
          name: "长客科技图",
          url: "#",
        },
        {
          name: "成都科技图",
          url: "#",
        },
        {
          name: "地铁科技图",
          url: "#",
        },
        {
          name: "甘肃科技图",
          url: "#",
        },
      ],
    };
  },
  methods: {
    handleSelect() {
    },
    onSearch() {
      getIpAddress().then((response) => {
        if (response.data !== null) {
          alert("ip is :" + response.data);
        }
      });
    },
    handleClick() {
    },
  },
};
</script>

<style>
.el-submenu__title {
  font-size: 18px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
